@import '~src/style/_influx-colors.scss';
@import '~src/style/_variables.scss';

// Main Layout
.telegraf-editor {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  height: 100%;
  width: 100%;
}

.telegraf-editor--heading {
  text-align: center;
  padding-bottom: $ix-marg-c;
}

.telegraf-editor--body {
  display: flex;
  align-items: stretch;
  height: 100%;
}

.telegraf-editor--column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  height: 30px;
  background-color: $g4-onyx;
  color: $g15-platinum;
  border-radius: $ix-radius $ix-radius 0 0;

  .telegraf-editor--column__collapsed & {
    padding: $ix-marg-a;
  }
}

.telegraf-editor--title {
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
  line-height: 32px;
  font-weight: 600;

  .telegraf-editor--column__collapsed & {
    display: none;
  }
}

.telegraf-editor--title__collapsed {
  font-size: 13px;
  white-space: nowrap;
  user-select: none;
  line-height: 32px;
  font-weight: 600;
  transform-origin: bottom left;
  transform: rotate(90deg);
  position: absolute;
  left: -2px;
  top: 8px;
}

// Column Layout
.telegraf-editor--left-column,
.telegraf-editor--middle-column,
.telegraf-editor--right-column {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: $g4-onyx;
  border-radius: $ix-radius;
}

.telegraf-editor--left-column {
  flex: 0 0 180px;
  margin-right: $ix-marg-a;
  position: relative;
}

.telegraf-editor--middle-column {
  flex: 1 0 0;
  border-radius: $ix-radius 0 0 $ix-radius;
  overflow: hidden;
}

.telegraf-editor--right-column {
  flex: 0 0 180px;
  border-left: 0;
  border-radius: 0 $ix-radius $ix-radius 0;
  position: relative;
}

.telegraf-editor--column-section {
  padding: $ix-marg-a + $ix-marg-b;
  padding-top: 0;

  p {
    margin: 0;
  }
}

.telegraf-editor--column__collapsed {
  flex-basis: 30px;
  overflow: hidden;
}

// Monaco Editor
.telegraf-editor--monaco {
  border: $ix-border solid $g4-onyx;
  border-radius: $ix-radius;
  border-right: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

// Plugins List
.telegraf-plugins {
  border: $ix-border solid $g4-onyx;
  border-radius: $ix-radius;
  background-color: $g2-kevlar;
}

.telegraf-plugins--list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.telegraf-plugins--item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 6px 8px;
}

.telegraf-plugins--divider {
  user-select: none;
  font-weight: 600;
  font-size: 13px;
  color: $g9-mountain;
  background-color: $g1-raven;
  text-transform: uppercase;
  cursor: default;
}

.telegraf-plugins--plugin {
  background-color: $g2-kevlar;
  transition: background-color 0.25s ease, color 0.25s ease;

  &:hover {
    cursor: pointer;
    color: $g18-cloud;
    background-color: $g5-pepper;
  }
}

.telegraf-plugins--item-name {
  font-size: 13px;
  font-weight: 700;
}
.telegraf-plugins--item-description {
  font-size: 11px;
  font-weight: 500;
  padding-left: 6px;
  opacity: 0.75;
}

// Search
.telegraf-editor--filter {
  margin: $ix-marg-a;
}
